
	<title>Subscriber</title>

	<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
		
	<script src="http://static.opentok.com/v0.91/js/TB.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	var sessionData;
	var session;
	function poll(numPolls, timeInMs){
		$.ajax({
			type:'GET',
			url:'checkSessionStarted?eventId='+${eventId},
			dataType:'json',
		//	timeout:timeoutVal,
			cache:false,
			data:{
				// Here you include the data used in the poll of the user i.e id,actcion. 
				
			},
			success: function(data, textStatus){
				//I assume the server will reply with success variable with content true for 
	                        // for action done or false for no.
				if(data == 'invalid_event'){
					$('#sessionDiv').html("<h2>Event already closed/ Invalid event</h2>");
				}else if (data.status == 'session_started'){
					//alert('session started successfully');
					sessionData = eval(data);
					connctSession(sessionData);
				}else{
				    // Just keep in mind that if the number of polls is to big, then this may 
				    //drain resources of the browser, because it is resource intensive.
	                            // And most important, the stack will store every funciton state, therefore too
	                            // stacks may lead to a overflow.
		
					if (numPolls>0){
						//we wait for 5 seconds and call the poll again.
						
						 setTimeout(function() {
					         poll((numPolls - 1),timeInMs); 				 
						 }, timeInMs);
					}else{
						// we reached the limit of times we polled the server
						// and we inform the customer/user that, 
	                                        // we couldn't confirm that the 
						// action has been completed
					}
				}
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {	
				//show an error message
			}
		});
	}
	function checkSessionStarted(){
		poll(10, 1000); 
	}
	
	function connctSession(sessionData){
			 TB.setLogLevel(TB.DEBUG); 
			 session=TB.initSession(sessionData.sessionId);
			 //session = TB.initSession('${sessionId}');			
		     session.addEventListener('sessionConnected', sessionConnectedHandler);
		     session.addEventListener('streamCreated', streamCreatedHandler);
		     TB.addEventListener("exception", exceptionHandler);
		     session.connect(sessionData.apiKey, sessionData.token);
		     //session.connect(${apiKey}, '${token}');
	}
	
	function sessionConnectedHandler(event){
		subscribeToStreams(event.streams);
		session.publish('publisherDiv');
	      $('#startBtn').text("Stop Learning");
	      var disconnectUrl = "/list";
	      $("#startBtn").attr("href", disconnectUrl);

	}
	
	function streamCreatedHandler(event) {
	      // Subscribe to any new streams that are created
	      subscribeToStreams(event.streams);
	    }
	function exceptionHandler(event){
		 TB.log(event.message);
		alert('in exception event');
	}
	
	function subscribeToStreams(streams) {
	      for (var i = 0; i < streams.length; i++) {
	        // Make sure we don't subscribe to ourself
	        if (streams[i].connection.connectionId == session.connection.connectionId) {
	          return;
	        }
	        var div = document.createElement('div');
	        div.setAttribute('id', 'stream' + streams[i].streamId);
	        document.getElementById('sessionDiv').appendChild(div);

	        // Subscribe to the stream
	        var subscribeProps = {height:240, width:320};
	        session.subscribe(streams[i], div.id);
	      }
	    }
	
	</script>
      <div class="row">
        <div class="span4">
          <h2>My Session</h2>
           <p>Get ready to learn.</p>
          <p><a id="startBtn" class="btn" href="#" onclick="checkSessionStarted()">Start Learning &raquo;</a></p>
        </div>
		</div>
		<div id="sessionDiv">
</div>  
<div id="publisherDiv">
</div>  
